<!DOCTYPE html>
<html class="x-admin-sm">

{include file="common/static" /}
{include file="common/resources" /}
<link rel="stylesheet" href="/static/plug/animated-border/css/animated-border.css">
<link href="/static/plug/csshover/css/div.css" rel="stylesheet" type="text/css"/>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <body>
        <div class="x-nav">
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15" id="app">
                <div class="layui-col-md12">
                    <div class="layui-card">

                        <div class="layui-card-body ">
                            <!--头部开始-->
                                <div class="layui-row">
                                    <div class="layui-col-md6">
                                        <blockquote class="layui-elem-quote layui-quote-nm">

                                            {include file="common/room_select" /}

                                            <form class="layui-form layui-col-space5" action="" method="get" style="margin-top: -20px;">
                                                <div class="layui-input-inline layui-show-xs-block">
                                                    <input type="text" name="room_num" placeholder="请输入房间号" autocomplete="off" class="layui-input">
                                                </div>
                                                <div class="layui-input-inline layui-show-xs-block">
                                                    <button class="layui-btn" lay-submit="" lay-filter="sreach">
                                                        <i class="layui-icon">&#xe615;</i></button>
                                                </div>
                                            </form>
                                        </blockquote>
                                    </div>
                                    <div class="layui-col-md6">

                                        <blockquote class="layui-elem-quote layui-quote-nm">
                                            <span class="layui-badge">房间信息</span>
                                            <span id="more_personnel"></span>
                                            <table v-show='my_room'>
                                                <colgroup>
                                                    <col width="250">
                                                    <col width="120">
                                                </colgroup>
                                                <thead>
                                                <tr>
                                                    <th>房间号码：{{num}}</th>
                                                    <th>房间类型：{{type}}</th>
                                                    <th>房间楼层：{{storey}}</th>
                                                    <th>房间状态：{{status}}</th>
                                                </tr>
                                                <tr>
                                                    <th>姓名：{{guest_name}}</th>
                                                    <th>今日价格：{{monday}}</th>
                                                    <th>原始价格：{{price}}￥</th>
                                                    <th>定金：{{deposit}}￥</th>
                                                </tr>
                                                <tr>
                                                    <th>证据号码：{{credentials}}</th>
                                                    <th>每小时：{{hour}}￥</th>
                                                    <th>入住时间：{{in_time}}</th>
                                                    <th>离店时间：{{move_time}}</th>
                                                </tr>
                                                </thead>
                                            </table>

                                            <div id="add_xiaofei">
                                                <span class="layui-badge" >服务功能</span>
                                                <button type="button" class="layui-btn layui-btn-normal" @click="consume()">增加消费{{id}}</button>
                                                <button type="button" class="layui-btn layui-btn-normal" @click="emptys()">置净{{id}}</button>
                                                <button type="button" class="layui-btn layui-btn-normal" @click="report()">维修{{id}}</button>
                                                <button type="button" class="layui-btn layui-btn-normal" @click="lock_room()">锁房{{id}}</button>
                                            </div>

                                            <div id="tui" style="margin-top: 2px;">
                                                <span class="layui-badge layui-bg-blue">常用功能</span>
                                                <button type="button" class="layui-btn layui-btn-warm" @click="move()">房间入住{{id}}</button>
                                                <button type="button" class="layui-btn layui-btn-warm" @click="replace_room()">换房{{id}}</button>
                                            </div>

                                        </blockquote>

                                    </div>
                                </div>
                            <!--头部结束-->
                            <div class="layui-row">

                                <div class="Service-box">
                                    <div class="Service-content clearfix">

                                        {volist name="list" id="vo"}
                                        <a href="javascript:;" class="Service-item" style="margin: 10px;" @click="action({$vo.id})">
                                            {if $vo['room_id'] == 'no' && $vo['status'] == '2'}<span class="layui-badge">{$vo.id}-主</span>
                                            {elseif $vo['status'] == '2' /}<span class="layui-badge">{$vo.room_id}-次</span>
                                            {/if}
                                            <h3 class="item-title">{$vo.room_num}</h3>
                                            {if $vo['status'] == '1'}<span class="layui-badge layui-bg-blue">空闲</span>
                                            {elseif $vo['status'] == '2'/}<span class="layui-badge">{$vo.guest_name}</span>
                                            {elseif $vo['status'] == '3'/}<span class="layui-badge">vip</span>
                                            {elseif $vo['status'] == '4'/}<span class="layui-badge">维修</span>
                                            {elseif $vo['status'] == '5'/}<span class="layui-badge">锁房</span>
                                            {elseif $vo['status'] == '6'/}<span class="layui-blue">待打扫</span>
                                            {else/}<span class="layui-badge">预订</span>
                                            {/if}
                                            <div class="item-text">{$vo.type_name}</div>
                                            <div class="item-text">今日价格:{$vo.monday}</div>
                                        </a>
                                        {/volist}
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    {$list|raw}
                </div>
            </div>
        </div>
    </body>

<script>
    layui.use(['laydate', 'form'],
        function() {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });
        });
    new 	Vue({
        el:'#app',
        data:{
            id:'',
            num:'',
            type:'',
            status:'',
            price:'',
            deposit:'',
            guest_name:'',
            monday:'',
            storey:'',
            hour:'',
            credentials:'',
            in_time:'',
            move_time:'',
            styles:'',
            my_room:false
        },
        //点击房间后的操作
        methods:{
            action:function(id){
                this.my_room = true;
                _this = this;
                $.ajax({
                    type:"post",
                    url: "{:url('home/welcome/index')}",
                    data: {id:id,},
                    success: function(data){
                        console.log(data);
                        _this.num = data.room_num;
                        _this.type = data.type_name;
                        _this.status = data.status;
                        _this.price = data.price;
                        _this.deposit = data.deposit;
                        _this.id = data.id;
                        _this.guest_name = data.guest_name;
                        _this.monday = data.monday;
                        _this.storey = data.storey;
                        _this.hour = data.hour;
                        _this.credentials = data.credentials;
                        _this.in_time = data.in_time;
                        _this.move_time = data.move_time;
                        if(data.room_id === 'no' && data.status === '2'){
                            $('#tui_del').remove();
                            var text = "  <button type=\"button\" id=\"tui_del\" class=\"layui-btn layui-btn-warm\" onclick=\"xadmin.open('退房','/home/atrial/out_room/id/"+data.id+"',700,800)\">\n" +
                                "           退房\n" +
                                "         </button> ";
                            $('#tui').append(text);
                        }else if(data.status === '2'){
                            $('#tui_del').remove();
                            var text = " <button type=\"button\" id=\"tui_del\" class=\"layui-btn layui-btn-warm\" onclick=\"out_room("+data.id+")\">退房</button> ";
                            $('#tui').append(text);
                        }
                        if(data.status === '2'){
                            $('#personnel').remove();
                            var text = "  <button type=\"button\" id=\"personnel\" class=\"layui-btn layui-btn-normal\" onclick=\"xadmin.open('更多入住人员','/home/welcome/more_personnel/room_num/"+data.room_num+"',800,600)\">\n" +
                                "           在住人员\n" +
                                "         </button> ";
                            $('#more_personnel').append(text);
                            /*租借物品*/
                            $('#xiaofei').remove();
                            var text = "  <button type=\"button\" id=\"xiaofei\" class=\"layui-btn layui-btn-normal\" onclick=\"xadmin.open('租借物品','/home/lease/add_rental/id/"+data.id+"',450,300)\">\n" +
                                "           租借物品\n" +
                                "         </button> ";
                            $('#add_xiaofei').append(text);
                        }

                    }});
            },//跳到入住的界面
            move:function () {
                if(this.id === ''){
                    toastr.error('请选择房间');
                    return false;
                }
                window.location.href="/home/welcome/move/id/"+this.id;
            },//更换房间
            replace_room:function(){
                if(this.id === ''){
                    toastr.error('请选择房间');
                    return false;
                }
                window.location.href="/home/atrial/replace_room/id/"+this.id;
            },//增加消费
            consume:function(){
                if(this.id === ''){
                    toastr.error('请选择房间');
                    return false;
                }
                window.location.href="/home/atrial/consume/id/"+this.id;

            },//置空房间
            emptys:function () {
                if(this.id === ''){
                    toastr.error('请选择房间');
                    return false;
                }
                _this = this;
                $.ajax({
                    type:"post",
                    url: "{:url('home/atrial/emptys')}",
                    data: {id:this.id,},
                    success: function(data){
                        console.log(data);
                        toastr.error(data.msg);
                        if(data.code == 100){
                            voice('eliminate');
                            setTimeout(function () {
                                layer.closeAll();
                                location.reload();
                            },1500);
                        }
                    }});
            },//维修
            report:function () {
                if(this.id === ''){
                    toastr.error('请选择房间');
                    return false;
                }
                _this = this;
                $.ajax({
                    type:"post",
                    url: "{:url('home/atrial/report')}",
                    data: {id:this.id,},
                    success: function(data){
                        console.log(data);
                        toastr.error(data.msg);
                        if(data.code == 100){
                            voice('fault');
                            setTimeout(function () {
                                layer.closeAll();
                                location.reload();
                            },1500);
                        }
                    }});
            },//锁房
            lock_room:function () {
                if(this.id === ''){
                    toastr.error('请选择房间');
                    return false;
                }
                _this = this;
                $.ajax({
                    type:"post",
                    url: "{:url('home/atrial/lock_room')}",
                    data: {id:this.id,},
                    success: function(data){
                        console.log(data);
                        toastr.error(data.msg);
                        if(data.code == 100){
                            voice('lock');
                            setTimeout(function () {
                                layer.closeAll();
                                location.reload();
                            },1500);
                        }
                    }});
            },
        }
    })
    //次房间退房
    function out_room(id) {
        _this = this;
        $.ajax({
            type:"post",
            url: "{:url('home/atrial/out_room')}",
            data: {id:id,},
            success: function(data){
                console.log(data);
                toastr.error(data.msg);
                if(data.code == 100){
                    voice('return');
                    setTimeout(function () {
                        layer.closeAll();
                        location.reload();
                    },1500);
                }
            }});
    }
    //查询房型
    function selects(id) {
        if(id === ''){
            $('#layout_all').submit();
        }else{
            $('#layout_'+id+'').submit();
        }
    }
    //查询房间状态
    function room_status(id) {
        if(id === ''){
            $('#type_id').submit();
        }else{
            $('#type_id'+id+'').submit();
        }
    }
</script>


</html>